<!--
 * @Author: your name
 * @Date: 2021-12-10 18:52:45
 * @LastEditTime: 2021-12-10 19:50:00
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Vue\12.10vue_zy\shopCar.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
        }

        header {
            width: 100%;
            height: 50px;
            background: #ffc;
            text-align: center;
            line-height: 50px;
        }

        main {
            flex: 1;
            overflow-y: scroll;
            background: #fcc;
        }

        footer {
            width: 100%;
            height: 50px;
            background: #ffc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
        }

        li {
            width: 100%;
            height: 150px;
            display: flex;
            align-items: center;
        }

        li input {
            width: 20px;
            height: 20px;
        }

        li img {
            width: 100px;
            height: 100px;
            margin: 0 10px;
        }

        li button {
            width: 40px;
            height: 30px;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <header>购物车</header>
        <main>
            <h1>
                <!-- @代表点击事件---@change="changecheck代表onchange事件时执行changecheck函数" -->
                <input type="checkbox" v-model="allcheck" @change="changecheck">全选
            </h1>
            <ul>
                <!-- v-for循环渲染 遍历list-->
                <li v-for="item in list">
                    <!-- item.isCheck? -->
                    <!-- 生成的数据里isCheck为判断值初始为false后判断时候选中v-model="承接了全选" -->
                    <input type="checkbox" v-model="item.isCheck">
                    <!-- :==v-bind变成动态 -->
                    <img :src="item.img" alt="">
                    <div>
                        <h3>{{item.title}}</h3>
                        <p>￥{{item.price}}</p>
                        <div>
                            <!-- 点击“-”时num-- 简单判断动态v-bind -->
                            <button @click="item.num--" :disabled="item.num<=1">-</button>
                            <span>{{item.num}}</span>
                            <button @click="item.num++">+</button>
                        </div>
                    </div>
                </li>
            </ul>
        </main>
        <footer>
            <span>
                <!-- 当全选按钮改变时执行changecheck事件 -->
                <input type="checkbox" @change="changecheck" v-model="allcheck">
                全选
            </span>
            <b>总价:${{totalprice}}</b>
            <button class="jiesuan" :disabled="!dis">结算{{totalnum}}</button>
        </footer>
    </div>
    <script src="./vue.js"></script>
    <script src="./mock.js"></script>
    <script>
        const data=Mock.mock({
            "list|10":[{
                img:"@image(100x100,@color)",
                title:'@ctitle(3,5)',
                "price|10-100.2":0,
                id:'@id',
                num:1,
                isCheck:false,
            }]
        })
        console.log(data);
        const vue=new Vue({
            //app
            el:'#app',
            data(){
                return{
                    //出现的量
                    list:data.list,
                    //全选按钮状态
                    allcheck:false,
                    //结算按钮状态
                    dis:false,
                    //总价
                    totalprice:0,
                    //总数量
                    totalnum:0
                }
            },
            methods: {
                //changechec函数当点中时list中isCheck跟着改变
                changecheck() {
                    console.log(this.allcheck);
                    this.list.forEach((v)=>{
                        v.isCheck=this.allcheck
                    })
                },
            },
            watch:{//监听事件
                list:{
                    handler(nV,oV){//handler事件综合
                        console.log(nV,oV);
                        //反选every
                        this.allcheck=nV.every((v)=>{
                            return v.isCheck
                        })
                        //结算一个点中就改变
                        this.dis=nV.some((item) => {
                            return item.isCheck
                        })
                        //计算总价reduce
                        this.totalprice=nV.reduce((a,b)=>{
                            console.log(a,b);
                            //如果b的状态true时
                            if(b.isCheck){
                                //计算
                                return a+b.num*b.price
                            }
                            
                            return a+0
                        },0)
                        //保留两位小数
                        this.totalprice=this.totalprice.toFixed(2);
                        this.totalnum=nV.reduce((a,b)=>{
                            if(b.isCheck){
                                return a+b.num
                            }
                            return a+0
                        },0)
                    },
                    deep:true,
                },
                allcheck:{
                    handler(nV,oV){
                        console.log('全选按钮的监听',nV,oV);
                    }
                }
            }
        })
    </script>
</body>
</html>